﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="TestStockFormList.aspx.cs" Inherits="Samples_TestStockFormList" %>

<%@ Register src="../dotNetFlexGrid/dotNetFlexGrid.ascx" tagname="dotNetFlexGrid" tagprefix="uc1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>JQuery FlexiGrid的asp.net完美解决方案：dotNetFlexGrid for asp.net-演示在表单中使用dotNetFlexGrid储存客户录入的数据并作为表单提交</title>
	<style type="text/css">
#form1 .a {
	padding: 2px;
	border: 1px solid #CCCCCC;
	width:600px;
	margin-top: 4px;
	margin-right: 0px;
	margin-bottom: 6px;
	margin-left: 0px;
}
* { font-size: 12px; }
#form1 .clear
{
	clear:both;
}
#form1 .input_btn
{
	background-color: #F2F1EE;
	margin: 4px;
	padding-top: 4px;
	padding-right: 8px;
	padding-bottom: 4px;
	padding-left: 8px;
	border-top-width: 1px;
	border-right-width: 2px;
	border-bottom-width: 2px;
	border-left-width: 1px;
	border-top-style: outset;
	border-right-style: inset;
	border-bottom-style: inset;
	border-left-style: outset;
	border-top-color: #CCCCCC;
	border-right-color: #404040;
	border-bottom-color: #404040;
	border-left-color: #CCCCCC;
}
#form1 .input_btn:hover
{
	background-color: #FFFFCC;
	margin: 4px;
	padding-top: 4px;
	padding-right: 8px;
	padding-bottom: 4px;
	padding-left: 8px;
	border-top-width: 1px;
	border-right-width: 2px;
	border-bottom-width: 2px;
	border-left-width: 1px;
	border-top-style: outset;
	border-right-style: inset;
	border-bottom-style: inset;
	border-left-style: outset;
	border-top-color: #CCCCCC;
	border-right-color: #404040;
	border-bottom-color: #404040;
	border-left-color: #CCCCCC;
}
	</style>
	<script type="text/javascript" src="../res/dialog.js"></script>
<script type="text/javascript">
function newGuid()
{
    var guid = "";
    for (var i = 1; i <= 32; i++){
      var n = Math.floor(Math.random()*16.0).toString(16);
      guid +=   n;
      if((i==8)||(i==12)||(i==16)||(i==20))
        guid += "-";
    }
    return guid;    
}
var boxyArray=[];//二维数组，用于存储key=iframe id,value=dialog
//关闭关联到指定window的模态对话框
function closeModel(win)
{
    var iframe=null;
    $("iframe").each(function(){
        if(this.contentWindow&&this.contentWindow==win)
        {
            iframe=this;
            return false;
        }
    });
    if(iframe)
    {
        var id=iframe.parentNode.parentNode.id;
        if(id)
        {
            $(boxyArray).each(function(){
                if(id==this[0])
                {
                    this[1].close();
                    return false;
                }
            });
                           
        }
    }
}
function OpenSimpleModel(title,url,height,width,onClose)
{
    if(!title)
        title='无标题';
    var iguid='OpenSimpleModel_'+newGuid();
    var dialog=new Dialog({type:'iframe',value:url},
                {id:iguid,title:title,height:height,width:width});
    var aTem=[iguid,dialog];
    boxyArray.push(aTem);
    dialog.show();
    
}
var suffix="?GridId="+'<%=dotNetFlexGrid1.ClientID %>';
function newForm()
{
	OpenSimpleModel('新建出库单','TestStockFormIn.aspx'+suffix+'&action=new',450,600);
}
function updateForm()
{
    var formId;
    var dic=<%=dotNetFlexGrid1.ClientID %>.getSelectedRows();
    if(dic&&dic.length>0)
    {
        formId=dic[0].item("FormId");
    }
    if(formId)
    {
        OpenSimpleModel('修改出库单', 'TestStockFormIn.aspx'+suffix+'&action=update&formId='+formId, 450, 600);
    }
    else
    {
        alert("请选择一条有效的记录!");
    }
}
function deleteForm() {
    var formId;
    var dic=<%=dotNetFlexGrid1.ClientID %>.getSelectedRows();
    if(dic&&dic.length>0)
    {
        formId=dic[0].item("FormId");
    }
    if(formId)
    {
        if (!confirm("您确定要删除所选择的入库单据？")) return false;
        if(Samples_TestStockFormList.DeleteStockForm(formId)){
            alert("删除成功!");
            dotNetFlexGrid1.deleteRows([formId]);
            dotNetFlexGrid2.reflashData();
        }
    }
    else
    {
        alert("请选择一条有效的记录!");
    }
}
function stateChange() {
    var txt = document.getElementById("FormState").value;
    if (txt)
    {
        var extP = [{ name: "FormState", value: txt}];
        dotNetFlexGrid1.applyQueryReload(extP);
    }
}
function Grid1Checked(id) {
    $('#txtFormId').val(dotNetFlexGrid1.getCellDatas(id)[0]);
    //传递给Grid2一个查询选项数组
    var p = [
        { name: "formId", value: dotNetFlexGrid1.getCellDatas(id)[0] }
    ];
    dotNetFlexGrid2.applyQueryReload(p);
}
</script> 
	<link href="../res/dialog.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <div><h1>dotNetFlexGrid for asp.net-演示在表单中使用dotNetFlexGrid储存客户录入的数据并作为表单提交还有两个GridView的联动效果，这是一个完整的入库单应用。</h1></div>
    <div class="a">
    操作：
    		<label>
    		<input name="button" type="button" class="input_btn" id="button" value="新建入库单" onclick="newForm();"/>
    		</label>
    		<label>
    		<input name="button2" type="button" class="input_btn" id="button2" value="修改" onclick="updateForm();"/>
    		</label>
    		<label>
    		<input name="button3" type="button" class="input_btn" id="button3" value="删除" onclick="deleteForm();"/>
    		筛选
    		</label>
    		<label>
    		<select id="FormState" name="FormState" class="input_btn" onchange="stateChange();">
    				<option value="0" selected="selected">-全部-</option>
    				<option value="1">已入库</option>
    				<option value="2">草稿</option>
   				</select>
    		</label>
    </div>
	<div >
	    <uc1:dotNetFlexGrid ID="dotNetFlexGrid1" runat="server" EventOnCheckedFunc="Grid1Checked" />
	</div>
	<div class="a">
	    <span>所选入库单：<input id="txtFormId" type="text" readonly=readonly size="60" /></span>
	</div>
	<div >
	    <uc1:dotNetFlexGrid ID="dotNetFlexGrid2" runat="server" />
	</div>
</form>
</body>
</html>
